<template>
<div>
<footer class="footer_guide">
  <span class="guide_item" :class="{on:$route.path==='/msite'}" @click="goTo('/msite')">
    <span>
      <i class="iconfont icon-waimaiAPP"></i>
    </span>
    <span>外卖</span>
  </span>
  <span class="guide_item" :class="{on:$route.path=='/search'}" @click="goTo('/search')">
    <span>
      <i class="iconfont icon-search"></i>
    </span>
    <span>搜索</span>
  </span>
  <span class="guide_item" :class="{on:$route.path==='/order'}"  @click="goTo('/order')">
    <span>
      <i class="iconfont icon-dingdan"></i>
    </span>
    <span>订单</span>
  </span>
  <span class="guide_item" :class="{on:$route.path==='/profile'}"  @click="goTo('/profile')">
    <span>
      <i class="iconfont icon-geren"></i>
    </span>
    <span>我的</span>
  </span>
</footer>

</div>
</template>

<script>
export default{
  data() {
    return {
     
     }
  },
  methods:{
    goTo(url){
    url===this.$route.path?url:this.$router.replace(url);
    }

  },
  components:{

 }
  }
 </script>

<style lang="stylus" rel="stylesheet/stylus" scope>
@import "../../assets/stylus/mixins.styl"
.footer_guide
  top-border-1px(#cccccc)
  z-index 100
  display flex
  position fixed
  left 0
  bottom 0
  width 100%
  height 50px
  background-color #fff
  .guide_item
    display flex
    flex-direction column
    text-align center
    width 25%
    &.on
      color $green
    span
      margin-top 4px
      font-size 12px
      .iconfont
        font-size 22px
</style>